<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>慕课七夕主题</title>
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <link rel="stylesheet" href="css/pageA.css" type="text/css" />
    <script src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/swipe.js"></script>
</head>
<style type="text/css">
    .charector {
        width: 151px;
        height: 291px;
        background: url(images/boy.png) -0 -291px no-repeat;
        position: absolute;
        left: 6%;
        top: 55%;
    }
    
</style>

<body>
    <div id="content">
        <ul class="content-wrap">
            <!-- 第一副画面 -->
            <li>
                <div class="a_background">
                    <div class="a_background_top"></div>
                    <div class="a_background_middle"></div>
                    <div class="a_background_botton"></div>
                </div>
            </li>
            <!-- 第二副画面 -->
            <li> 页面2 </li>
            <!-- 第三副画面 -->
            <li> 页面3 </li>
        </ul>
        <div id="boy" class="charector"></div>

        <div class="button">
            <button>点击开始动画</button>
        </div>
    </div>
    <script type="text/javascript">
        var swipe = Swipe($("#content"));

        // 获取数据
        getValue = function (className) {
            var $elem = $(className);
            // 走路的路线坐标
            return {
                height: $elem.height(),
                top: $elem.position().top
            };
        };

        // 路的Y轴
        function pathY() {
            var data = getValue('.a_background_middle');
            return data.top + data.height / 2;
        };

        var $boy = $("#boy");
        var boyHeight = $boy.height();

        // 修正小男孩的正确位置
        // 路的中间位置减去小孩的高度，25是一个修正值
        $boy.css({
            top: pathY() - boyHeight + 25
        });

        // ==========================
        //     增加精灵动画
        // ==========================
        $('button').click(function () {
            // 增加走路的CSS3关键帧规则
            swipe.scrollTo($("#content").width() * 2, 5000);
            $boy.addClass('slowWalk');
        })


    </script>
</body>

</html>